<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		body{
			background-color: rgb(111,222,123);
		}
	</style>
</head>
<body>
	<p>
		r: 
		<input type="button" value="-" id="btnRM"/>
		<input type="text" id="txtR" value="111"/>
		<input type="button" value="+" id="btnRP"/>
	</p>
	<p>
		g: 
		<input type="button" value="-" id="btnGM"/>
		<input type="text" id="txtG" value="222"/>
		<input type="button" value="+" id="btnGP"/>
	</p>
	<p>
		b: 
		<input type="button" value="-" id="btnBM"/>
		<input type="text" id="txtB" value="123" />
		<input type="button" value="+" id="btnBP"/>
	</p>
	<p>
		<input type="button" value="go" id="btnGo"/>
	</p>


	<script type="text/javascript">
		//得到元素，一共得到3个文本框，和7个按钮
		var txtR = document.getElementById("txtR");
		var txtG = document.getElementById("txtG");
		var txtB = document.getElementById("txtB");
		
		var btnGo = document.getElementById("btnGo");
		var btnRM = document.getElementById("btnRM");
		var btnGM = document.getElementById("btnGM");
		var btnBM = document.getElementById("btnBM");
		var btnRP = document.getElementById("btnRP");
		var btnGP = document.getElementById("btnGP");
		var btnBP = document.getElementById("btnBP");

		//信号量
		var r = 111;
		var g = 222;
		var b = 123;

		//各种监听，监听一共有7个
		btnRM.onclick = function(){
			r--;
			changeColor();
		}
		btnGM.onclick = function(){
			g--;
			changeColor();
		}
		btnBM.onclick = function(){
			b--;
			changeColor();
		}

		btnRP.onclick = function(){
			r++;
			changeColor();
		}
		btnGP.onclick = function(){
			g++;
			changeColor();
		}
		btnBP.onclick = function(){
			b++;
			changeColor();
		}

		btnGo.onclick = function(){
			if(!/^\d+$/.test(txtR.value) || 
				!/^\d+$/.test(txtG.value) ||
				!/^\d+$/.test(txtB.value)){
				alert("错误的输入");
			
				return;
			}

			r = txtR.value;
			g = txtG.value;
			b = txtB.value;
			changeColor();
		}



		//业务
		function changeColor(){
			if(r > 255) r = 255;
			if(g > 255) g = 255;
			if(b > 255) b = 255;
			if(r < 0) r = 0;
			if(g < 0) g = 0;
			if(b < 0) b = 0;
			//根据当前信号量来设置颜色
			document.body.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
			//框框里面的数字变，都根据信号量来变
			txtR.value = r;
			txtG.value = g;
			txtB.value = b;
		}
	</script>
</body>
</html>